
<template>
	<div class="economicsAnalysis realTimeDataClass accQuery" :style="{width:pageWidth}">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'>
				<i class="icon iconfont">&#xe7d8;</i>
				当前位置 / 游戏内分析 / <span>{{title}}</span>
			</div>
		</div>
        <div class="choose_dialog fadeInDown animated">
			<div class="block">
				<el-form  class="demo-form-inline" :inline="true" :model="ruleForm">
					<el-form-item label="选择日期：" :label-width="formLabelWidth">
						<el-date-picker
						v-model="ruleForm.startDate"
						align="left"
						type="daterange"
						placeholder="请选择日期"
						@change='dateChange' :picker-options="pickerOptions0">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="平台：" :label-width="formLabelWidth"  prop="platForm">
						<el-select v-model="ruleForm.platForm" filterable  placeholder="请选择平台" @change="platChange">
							<el-option v-for="(val,key) in platForms" :label="val.id" :value="val.num" :key='key'></el-option>
						</el-select>
					</el-form-item>                    
					<el-form-item label="渠道名称：" :label-width="formLabelWidth"  prop="channel">
						<el-select v-model="ruleForm.channel" filterable  placeholder="请选择渠道名称"  @change="channelChange">
							<el-option v-for="(val,key) in channels" :label="val.id" :value="val.num" :key='val.num'></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="全区服：" :label-width="formLabelWidth"  prop="server">
						<el-select v-model="ruleForm.server" filterable  placeholder="请选择全区服" @change="serverChange">
							<el-option v-for="(val,key) in servers" :label="val.id" :value="val.num" :key='key'></el-option>
						</el-select>
					</el-form-item>
                    <el-form-item label="钻石类型：" :label-width="formLabelWidth"  prop="jewel">
						<el-select v-model="ruleForm.jewel" filterable  placeholder="请选择钻石类型" @change="jewelChange">
							<el-option v-for="(val,key) in jewels" :label="val.id" :value="val.num" :key='key'></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary"  icon="search" @click="search()" :disabled="searchable">查询</el-button>
		    		</el-form-item>
					
				</el-form>
				<p style="color:#2eb398;text-align:center">（输入搜索条件，留空搜索全部！）</p>
			</div>
		</div>
		 <div class="right_content">
			<div class="listChart1">
				<div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
					<p class='zoomIn animated'>概览</p>
					<div class="chart1-introduce">
						<el-popover
		              ref="listChart1_popo"
		              placement="top-start"
		              title="留存趋势"
		              width="200"
		              trigger="hover">概览</el-popover> <i class="el-icon-information" v-popover:listChart1_popo></i>
					</div>
				</div>
				<div style="height:450px;width:100%;position:absolute;" v-if="realLoadShow" v-loading="realLoadShow" element-loading-text="拼命加载中"></div>
				<div class="realTimeData" id='realTimeData'></div>
				<el-collapse accordion>
					<el-collapse-item>
						<template slot="title">
							点击查看详细数据
							  <el-button type="primary" size="mini" class="excel"  @click.stop="excel('1','游戏内分析-经济统计-概览')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
								<i class="icon iconfont">&#xe7f0;</i>
								导出excel
							</el-button>  
						</template>
						<el-table
				              :data="tableData1"
				              border
				              >
							<el-table-column 
                                align="center"
		                        v-for="col in tableHeaderAll1"
		                        :prop="col.prop" 
                                :label="col.label" 
                                :width='col.width'
								:key="col.prop"
                            >
                            </el-table-column>
						</el-table>
						<div class="block realTimeServicePage">
							<el-pagination
							@size-change="handleSizeChange1"
							@current-change="handleCurrentChange1"
							:current-page="page1.currentPage"
							:page-sizes="page1.pageSizes"
							:page-size="page1.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="page1.dataTotal"></el-pagination>
						</div>
					</el-collapse-item>
				</el-collapse>
			</div>
			<div class="listChart1">
				<div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
					<p class='zoomIn animated'>货币消耗途径(TOP20)</p>
					<div class="chart1-introduce">
						<el-popover
					              ref="listChart1_popo"
					              placement="top-start"
					              title="留存趋势"
					              width="200"
					              trigger="hover">货币消耗途径(TOP20)</el-popover>
						<i class="el-icon-information" v-popover:listChart1_popo></i>
					</div>
				</div>
				<el-select v-model="postObj.label" placeholder="请选择" @change="postObjFn" :style='{"marginTop":"10px","marginBottom":"10px"}'>
					<el-option
					v-for="item in chartDataA"
					:key="item.value"
					:label="item.label"
					:value="item.value">
					</el-option>
				</el-select>
				<div style="height:550px;width:100%;position:absolute;" v-if="realLoadShow" v-loading="realLoadShow" element-loading-text="拼命加载中"></div>
				<div class="realTimeData" id='realTimeData2' style="height:550px"></div>
				<el-collapse accordion>
					<el-collapse-item>
						<template slot="title">
							点击查看详细数据
							  <el-button type="primary" size="mini" class="excel"  @click.stop="excel('2','游戏内分析-经济统计-货币消耗途径')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
								<i class="icon iconfont">&#xe7f0;</i>
								导出excel
							</el-button>  
						</template>
						<el-table
				              :data="tableData2"
				              border
				              >
							<el-table-column 
								align="center"
								v-for="col in tableHeaderAll2"
								:prop="col.prop" 
								:label="col.label"
								:width='col.width'
								:key="col.prop"
							>
							</el-table-column>
						</el-table>
						<div class="block realTimeServicePage">
							<el-pagination
							@size-change="handleSizeChange2"
							@current-change="handleCurrentChange2"
							:current-page="page2.currentPage"
							:page-sizes="page2.pageSizes"
							:page-size="page2.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="page2.dataTotal"></el-pagination>
						</div>
					</el-collapse-item>
				</el-collapse>
			</div>
			<div class="listChart1">
				<div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
					<p class='zoomIn animated'>商城道具相关货币消耗途径(TOP20)</p>
					<div class="chart1-introduce">
						<el-popover
					              ref="listChart1_popo"
					              placement="top-start"
					              title="留存趋势"
					              width="200"
					              trigger="hover">商城道具相关货币消耗途径(TOP20)</el-popover>
						<i class="el-icon-information" v-popover:listChart1_popo></i>
					</div>
				</div>
				<el-select v-model="postObj2.label" placeholder="请选择" @change="postObjFn2" :style='{"marginTop":"10px","marginBottom":"10px"}'>
					<el-option
					v-for="item in chartDataA"
					:key="item.value"
					:label="item.label"
					:value="item.value">
					</el-option>
				</el-select>
				<div style="height:500px;width:100%;position:absolute;" v-if="realLoadShow" v-loading="realLoadShow" element-loading-text="拼命加载中"></div>
				<div class="realTimeData" id='realTimeData3' style="height:500px"></div>
				<el-collapse accordion>
					<el-collapse-item>
						<template slot="title">
							点击查看详细数据
							  <el-button type="primary" size="mini" class="excel"  @click.stop="excel('3','游戏内分析-经济统计-商城道具相关货币消耗途径')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
								<i class="icon iconfont">&#xe7f0;</i>
								导出excel
							</el-button>  
						</template>
						<el-table
				              :data="tableData3"
				              border
				              >
							<el-table-column 
								align="center"
								v-for="col in tableHeaderAll3"
								:prop="col.prop" 
								:label="col.label" 
								:key="col.prop" 
								:width='col.width'
								>
								</el-table-column>
						</el-table>
						<div class="block realTimeServicePage">
							<el-pagination
							@size-change="handleSizeChange3"
							@current-change="handleCurrentChange3"
							:current-page="page3.currentPage"
							:page-sizes="page3.pageSizes"
							:page-size="page3.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="page3.dataTotal"></el-pagination>
						</div>
					</el-collapse-item>
				</el-collapse>
			</div>
		</div>
		 <a href="" :download="xlsxTitle+'.xlsx'" id="hf"></a>  
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./economicsAnalysis.styl"></style>
<script src="./economicsAnalysis.js"></script>